// 头部信息
<template>
  <div id="header">
    <div class="bodycontent clear">
      <p class="headerLeft">
        <span class="headerAddressSpan">
          所在城市 ：
          <em class="headerAddress" @click="chooseAddress">北京朝阳区</em>
          <i class="iconfont icon-below-s"></i>
        </span>
      </p>
      <p class="headerRight">
        <span v-show="this.login">
          <span>您好,</span>
          <span class="headerPhone">10086&nbsp;</span>
          <em class="headerExit" @click="drop">退出</em>
        </span>
        <span v-show="!this.login" @click="loginComShow">请登录</span>
        <em class="headerMyCase">我的订单</em>
        <em class="headerMyMessage">我的消息</em>
        <em class="header">我是商家</em>
        <strong>
          <i class="iconfont icon-dianhua"></i>10086
        </strong>
      </p>
    </div>
    <div class="loginPopMask" @click="loginComHide" ref="loginPopMask"></div>
    <div class="loginPopBox" ref="loginPopBox">
      <Logincom />
    </div>
    <div class="addressPopBox" ref="addressPopBox">
      <ChooseAddress />
    </div>
  </div>
</template>
<script>
import Logincom from "@/components/Logincom.vue";
import ChooseAddress from "@/components/ChooseAddress.vue";
// import BMap from 'vue-baidu-map'
export default {
    components:{
        Logincom,
        ChooseAddress,
    },
    data() {
        return {
            login:localStorage.login,
            // LocationCity:"正在定位"    //给渲染层定义一个初始值
        }
    },
    // watch:{
    //     loginState(){
    //         return this.login;
    //     }
    // },
    mounted(){
        // this.city()    //触发获取城市方法
    },
    methods:{
        loginComShow(){
            this.$refs.loginPopMask.style.display = "block";
            this.$refs.loginPopBox.style.display = "block";
        },
        loginComHide(){
            this.$refs.loginPopMask.style.display = "none";
            this.$refs.loginPopBox.style.display = "none";
            this.$refs.addressPopBox.style.display = "none";
        },
        drop(){
            var _this = this
            new Promise(function(resolve,reject){
                localStorage.login = "";
                _this.login = false;
                resolve();
                reject();
            }).then(
                function(){
                _this.$router.push({
                    name:'login'
                })
            })
        },
        chooseAddress(){
            this.$refs.loginPopMask.style.display = "block";
            this.$refs.addressPopBox.style.display = "block";
        },
        // city(){    //定义获取城市方法
        //   const geolocation = new BMap.Geolocation();
        //   var _this = this
        //   geolocation.getCurrentPosition(function getinfo(position){
        //       let city = position.address.city;             //获取城市信息
        //       let province = position.address.province;    //获取省份信息
        //       _this.LocationCity = city+province;
        //   }, function() {
        //       _this.LocationCity = "定位失败"
        //   }, {provider: 'baidu'});       
        // }
    }
}
</script>
<style scoped>
@import url("http://at.alicdn.com/t/font_1435664_ks74ppjrets.css");
.headerAddressSpan .iconfont {
  font-size: 12px;
}
#header {
  width: 100%;
  background-color: #eee;
  font-size: 14px;
  padding: 8px 0;
  color: #999;
}
.headerLeft {
  float: left;
}
.headerRight {
  float: right;
}
.headerRight em {
  display: inline-block;
  padding: 0 10px;
  line-height: 14px;
  border-right: 1px solid #999;
}
em {
  cursor: pointer;
}
strong {
  padding-left: 10px;
  color: #666;
}
strong i {
  margin-right: 5px;
  color: #4b943d;
}
.loginPopMask {
  width: 100%;
  height: calc(100% + 27px);
  position: fixed;
  top: -27px;
  z-index: 10;
  background-color: rgba(99, 99, 99, 0.3);
  display: none;
}
.loginPopBox {
  position: fixed;
  z-index: 11;
  top: 50%;
  left: 50%;
  margin-left: -194px;
  margin-top: -200px;
  display: none;
}
.addressPopBox {
  position: fixed;
  z-index: 11;
  top: 50%;
  left: 50%;
  margin-left: -350px;
  margin-top: -200px;
  display: none;
}
</style>